<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>cover</title>
	<style>
		html,body {overflow: hidden;}

		body, div, h2, p {margin: 0;padding: 0;}
		body {color: #fff;background: #000;font: 12px/2 Arial;}
		p {padding: 0 10px; margin-top: 10px;}
		span {color: #ff0;padding-left: 5px;}

		#box {position: absolute;width: 300px;height: 150px;background: #333;border: 2px solid #ccc;top: 50%;left: 50%;margin:-75px 0 0 -150px;}
		#box h2 {height: 25px;font: 12px/25px Arial;cursor: move;background: #222;border-bottom: 2px solid #ccc;text-align: right;padding: 0 10px;}
		#box h2 a {color:#fff;text-decoration: none;outline: none;}
	</style>
	<script>
		window.onload = function() {
			var oBox = document.getElementById("box");
			var oH2 = oBox.getElementsByTagName("h2")[0];
			var oA = oBox.getElementsByTagName("a")[0];

			var aSpan = oBox.getElementsByTagName("span");
			// 记录鼠标相对于box这个容器的位置
			var disX = disY = 0;
			//拖曳激活状态标志
			var bDrag = false;
			var aPos = [{x:oBox.offsetLeft, y:oBox.offsetTop}];
			//激活拖曳
			oH2.onmousedown = function(event){
				var event = event || window.event;
				bDrag = true;
				// 记录鼠标相对box的点击位置
				disX = event.clientX - oBox.offsetLeft;
				disY = event.clientY - oBox.offsetTop;
				
				aPos.push({x:oBox.offsetLeft, y:oBox.offsetTop});
				// 鼠标位置绘制
				this.setCapture && this.setCapture();
				
				return false;
			}
			
			// 拖曳开始
			document.onmousemove = function(event) {
				if(!bDrag) return;
				var event = event || window.event;
				var iL = event.clientX - disX;
				var iT = event.clientY - disY;
				// console.log(oBox.offsetLeft)
				// console.log(iL)
				var maxL = document.documentElement.clientWidth - oBox.offsetWidth;
				var maxT = document.documentElement.clientHeight - oBox.offsetHeight;
				console.log(iL, oBox.offsetLeft, iT, oBox.offsetTop, maxL, maxT)
				// 控制拖曳范围
				iL = iL<0 ? 0 : iL;
				iL = iL>maxL ? maxL : iL;
				iT = iT<0 ? 0 : iT;
				iT = iT>maxT ? maxT : iT;
				//改变盒子的位置
				oBox.style.marginTop = oBox.style.marginLeft = 0;
				oBox.style.left = iL + "px";
				oBox.style.top = iT + "px";
				// 记录盒子每一个像素点的位置变化
				aPos.push({x:iL, y:iT});
				console.log(aPos);
				// 面板显示监听状态函数
				status();

				return false;
			}

			// 鼠标释放，结束拖曳
			document.onmouseup = window.onblur = oH2.onlosecapture = function() {
				bDrag = false;
				oH2.releaseCapture && oH2.releaseCapture();
				status();
			};

			// 回放拖动轨迹
			oA.onclick = function() {
				if(aPos.length == 1) return;
				var timer = setInterval(function() {
					var oPos = aPos.pop();
					oPos ?　(oBox.style.left = oPos.x + "px", oBox.style.top = oPos.y + "px", status()) : clearInterval(timer);
				}, 30);
				this.focus = false;
				return false;
			};

			oA.onmousedown = function(event){
				(event || window.event).cancelBubble = true;
			};

			
			function status() {
				aSpan[0].innerHTML = bDrag;
				aSpan[1].innerHTML = oBox.offsetTop;
				aSpan[2].innerHTML = oBox.offsetLeft;
			}

			//初始调用
			status()
		}
	</script>
</head>
<body>
	<div id="box">
		<h2><a href="javascript:;">点击回放拖动轨迹</a></h2>
		<p><strong>Drag:</strong><span></span></p>
		<p><strong>offsetTop:</strong><span></span></p>
		<p><strong>offsetLeft:</strong><span></span></p>
	</div>
</body>
</html>